<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      height: 100px;
      width: 100px;
      background-color: red;
    }
  </style>
  <script type="text/javascript">
  window.onload = function () {
    //点击按钮以后读取box1的样式
    var box1 = document.getElementById("box1");
    var btn01 = document.getElementById("btn01");
    function getStyle (obj,name) {
      if (window.getComputedStyle) {
        return getComputedStyle(obj,null)[name]
      } else {
        return obj.currentStyle[name]
      }
    }
    btn01.onclick = function() {
      					//读取box1的宽度
					//alert(box1.style.width);
					
					/*
					 * 获取元素的当前显示的样式
					 * 	语法：元素.currentStyle.样式名
					 * 它可以用来读取当前元素正在显示的样式
					 * 	如果当前元素没有设置该样式，则获取它的默认值
					 * 
					 * currentStyle只有IE浏览器支持，其他的浏览器都不支持
					 */
					
					//alert(box1.currentStyle.width);
					//box1.currentStyle.width = "200px";
					//alert(box1.currentStyle.backgroundColor);
					
					/*
					 * 在其他浏览器中可以使用
					 * 		getComputedStyle()这个方法来获取元素当前的样式
					 * 		这个方法是window的方法，可以直接使用
					 * 需要两个参数
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素，一般都传null
					 * 
					 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 	可以通过对象.样式名来读取样式
					 * 	如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 	比如：没有设置width，它不会获取到auto，而是一个长度
					 * 
					 * 但是该方法不支持IE8及以下的浏览器
					 * 
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
					 * 	不能修改，如果要修改必须通过style属性
					 */
					//var obj = getComputedStyle(box1,null);
					
					/*alert(getComputedStyle(box1,null).width);*/
					//正常浏览器的方式
					//alert(getComputedStyle(box1,null).backgroundColor);
					
					//IE8的方式
					//alert(box1.currentStyle.backgroundColor);
					
					// alert(getStyle(box1,"width"));
          var w = getStyle(box1,'width')
          alert(w)
          
    }
  }
  </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <br /><br />
    <div id="box1" ></div>
</body>
</html>